<template>
  <div class="header-content">
    <el-menu
      class="el-menu-demo el-menu-lutian"
      mode="horizontal"
      background-color="#fff"
      text-color="black"
    >
      <div class="changeagent">
        <el-button size="small" type="warning" @click="clickopenagent"
          >修改代理地址</el-button
        >
        <div style="font-size: 12px; margin-left: 15px; color: #a8abb2">
          当前代理地址：{{ agentDatas.address }}:{{ agentDatas.port }}
        </div>
      </div>
      <el-sub-menu index="2">
        <template #title>{{ userdata.username }}</template>
        <el-menu-item index="2-1" @click="sigout" style="font-size: 13px"
          >退出登录</el-menu-item
        >
      </el-sub-menu>
    </el-menu>

    <el-dialog
      v-model="agentdialogVisible"
      title="修改代理地址"
      width="500"
      center
    >
      <div>
        <el-form
          label-position="left"
          label-width="auto"
          style="max-width: 600px"
        >
          <el-form-item label="代理地址">
            <el-row :gutter="20">
              <el-col :span="14">
                <el-input
                  v-model="agentData.address"
                  aria-label="First Name"
                  style="font-size: 13px"
                  placeholder="输入地址"
                />
              </el-col>
              <el-col :span="1">
                <span>:</span>
              </el-col>
              <el-col :span="8">
                <el-input
                  v-model="agentData.port"
                  aria-label="Last Name"
                  style="font-size: 13px"
                  placeholder="输入端口"
                />
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="agentdialogVisible = false">取消</el-button>
          <el-button type="primary" @click="modifyagent"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, inject } from "vue";

import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { ipc } from "@/utils/ipcRenderer";
import { ipcApiRoute } from "@/api/main.js";


const userdata = ref({});
const router = useRouter();

const agentdialogVisible = ref(false);

const agentData = ref({
  address: "",
  port: "",
});

const agentDatas = ref({
  address: "",
  port: "",
});

const handleSelect = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};

const sigout = () => {
  ElMessageBox.confirm("是否退出当前账号登录", "提示", {
    confirmButtonText: "退出",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      localStorage.removeItem("currentUserstr");
      ElMessage({
        type: "success",
        message: "退出成功",
      });
      router.push({ name: "login" });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

const clickopenagent = () => {
  ipc.invoke(ipcApiRoute.getagentData).then(async (r) => {
    agentData.value.address = r.address;
    agentData.value.port = r.port;
    agentDatas.value.address = r.address;
    agentDatas.value.port = r.port;
    agentdialogVisible.value = true;
  });
};

const modifyagent = () => {
  if (agentData.value.address != "" && agentData.value.port != "") {
    ipc.invoke(ipcApiRoute.modifyagentData,JSON.stringify(agentData.value) ).then(async (r) => {
      agentData.value.address = r.address;
      agentData.value.port = r.port;
      agentDatas.value.address = r.address;
      agentDatas.value.port = r.port;
      agentdialogVisible.value = false;
    });
  } else {
    ElMessage({
      message: "代理地址不能为空",
      type: "warning",
    });
  }
};

onMounted(() => {
  const currentUserstr = localStorage.getItem("currentUserstr");
  userdata.value = JSON.parse(currentUserstr);
  ipc.invoke(ipcApiRoute.getagentData).then(async (r) => {
    agentData.value.address = r.address;
    agentData.value.port = r.port;
    agentDatas.value.address = r.address; 
    agentDatas.value.port = r.port;
  });

});
</script>

<style scoped>
.header-content {
  height: 5vh;
  /* width: 50%; */
  /* display: flex; */
  /* justify-content: space-between; */
}
.el-menu-lutian {
  height: 100%;
  /* width: 50%; */
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
}

.changeagent {
  display: flex;
  height: 100%;
  align-items: center;
  padding-left: 20px;
}
</style>

<style>
.el-menu-lutian .el-menu-item:not(.is-disabled):hover,
.el-menu-lutian .el-menu-item:not(.is-disabled):focus {
  background-color: #fff !important;
}
</style>